<template>
  <view class="con">
    <!-- 头部 -->
    <view class="topWrap">
      <view :style="{marginTop: systemBarHeight + 'px'}"></view>
      <view class="topssss">
        <image class="topssss_img" @click="fanuiBtn" mode="widthFix" src="/static/index/img29.png"></image>
        <view>我的闲鱼</view>
      </view>
      <!-- 账号信息 -->
      <view class="shim flex">
        <view>
          <navigator url="/packageA/mine/xianYuXinXi" class="shim1 yanse1"><text class="ttt1">闲鱼信息</text></navigator>
          <navigator url="/packageA/index/woDeHuiDan" class="shim1 yanse1"><text class="ttt1">我的回单</text><text class="ttt2">{{daiHunDanNum}}</text></navigator>
        </view>
        <view class="shim2">
          <image class="shim2_img" @click="fanuiBtn" mode="widthFix" :src="XianPeopleInfo.head"></image>
        </view>
        <view>
          <view class="shim1 yanse2"><text class="t1">互单金</text><text class="t2">{{userInfo.money_xian}}</text></view>
          <view class="shim1 yanse3" @click="showTanBtn">新增产品</view>
        </view>
      </view>
      <view class="shimb">
        <view class="shimb111">{{XianPeopleInfo.nikename}}</view>
        <view class="shimb222">{{XianPeopleInfo.nicknum}}</view>
      </view>
      <view class="kianh flex">
        <view class="chunfe" v-for="(item,index) in list" :key="index">
          <text class="chunfe_t1">Fish</text>
          <text class="chunfe_t2">{{item.nikename}}</text>
        </view>
      </view>
    </view>
    <!-- 我的闲鱼 -->
    <view class="woLid">
      <!-- <view class="woLidT flex flex_between">
        <view class="woLidTz">我的闲鱼</view>
        <view class="woLidTy" @click="showTanBtn">新增产品</view>
      </view> -->
      <!-- list -->
      <view class="luit">
        <view class="luitli flex" v-for="(item,index) in myxianList" :key="index">
          <view style="width: 200rpx; height: 200rpx; overflow: hidden;border-radius: 20rpx;margin-right: 32rpx;">
            <image class="luitliz" @click="fanuiBtn" mode="widthFix" :src="item.pic"></image>
          </view>
          
          <view class="luitliy">
            <view>
              <view class="luitliy_v1">标题：{{item.title}}</view>
              <!-- <view class="luitliy_v2">单数：{{item.kc}}</view> -->
              <view class="guancCliz_y flex">
                <view class="guancCliz_y1">{{item.kc}}<text></text></view>
                <view class="guancCliz_y2">已互{{item.hu_order_num}}<text></text></view>
              </view>
            </view>
            <view class="luitliy_v3 flex flex_between">
              <switch color="#f9bf41" class="luitliy_v3xxx" :checked="item.hide_state==='0'||item.hide_state===0" @change="changType(item.id)"
                style="transform:scale(0.5)" />
              <view class="luitliy_v3_y">
                <!-- <image class="luitliy_v3_y_img" @click="editBtn(item)" mode="widthFix" src="/static/index/img31.png"></image> -->
                <image class="luitliy_v3_y_img" @click="deleteBtn(item)" mode="widthFix" src="/static/index/img32.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="showaddTan || isShow2" @click="hideTan"></view>
    <!-- 新增弹窗 -->
    <view class="addTan" v-if="showaddTan">
      <!-- 咸鱼图片 -->
      <view class="shanuTitle">产品上传</view>
      <view class="addTanli flex">
        <!-- <view class="addTanliz">图片：</view> -->
        <view  @click="chooseImageBtn" style="width: 100%;">
          <view class="addTanliy" v-if="addUpLoadpic">
            <image class="addTanliy_img" mode="aspectFill" :src="addUpLoadpic"></image>
          </view>
          <view class="addTanliy flex" v-else>
            <image class="addTanliy_img2" src="/static/mine/img16.png" mode="widthFix">
            </image>
            <view class="addTanliy_text">闲鱼图片</view>
          </view>
        </view>
      </view>
      <!-- 标题 -->
      <view class="addTanli flex">
        <!-- <view class="addTanliz">标题：</view> -->
        <input class="addTanli_ipt" type="text" placeholder="请输入产品标题（示例0710-01）" v-model="form.title"/>
      </view>
      <!-- 单数 -->
      <view class="addTanli flex">
        <!-- <view class="addTanliz">单数：</view> -->
        <input class="addTanli_ipt" type="number" placeholder="请输入互单数量（仅数字）" v-model="form.kc"/>
      </view>
      <view class="hudanBtn" @click="confirmBtn">确定提交</view>
    </view>
    
    <!-- 删除咸鱼-确认框 -->
    <view class="tan" v-if="isShow2">
      <view class="zhes_2">
        <view class="zhes_3">确定删除该闲鱼吗？</view>
        <view class="zhes_5Wrap flex flex_between">
          <view class="zhes_51" @click="hideTan">我再看看</view>
          <view class="zhes_52" @click="deletBtnSure">确认删除</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    xianMyxianList,//我的闲鱼
    xianXianAdd, //添加我的闲鱼
    xianXianDel,//删除我的咸鱼
    xianXianUpdatel,//修改我的闲鱼
    xianxianMyHui ,//我的回单
    xianXianPeople,//会员的互单内容
    xianMyxianinfo,//获取闲鱼信息
    xianXianShow //闲鱼产品隐藏、显示
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        // openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU',//元辰的openid
        userInfo:uni.getStorageSync('userInfo'), //获取用户信息
        showaddTan:false,//新增或修改弹窗
        addUpLoadpic:'', //新增或者修改的咸鱼图片
        systemBarHeight: 0,
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
        myxianList:[],//闲鱼列表
        form:{
          pic:'',
          title:'',
          kc:''
        },
        isShow2:false, //删除咸鱼确认框
        selectXianYuInfo:{},//选择的咸鱼信息
        isEdit:false,//是否是编辑操作
        daiHunDanNum:0,//我的回单数量
        XianPeopleInfo:{} ,//闲鱼信息
        list:[] //闲鱼信息列表
      };
    },
    onLoad(){
      this.getStatusBarHeight();//状态栏高度
      this.getXianMyxianListFun() //我的咸鱼列表
      this.getXianMyHuiListFun() //获取回单数量
      this.getXianPeopleFun() //获取闲鱼信息
      this.xianMyxianinfoFun() //获取闲鱼信息列表
      this.userInfo = uni.getStorageSync('userInfo')
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods: {
      // 获取列表
      xianMyxianinfoFun(){
        let param = {
          openid:this.openid
        }
        xianMyxianinfo(param).then(res=>{
          this.list = res.data
        })
      },
      // 会员的互单内容
      getXianPeopleFun() {
        let that = this
        let param = {
          openid: this.openid,
          people: this.userInfo.id, //这里的id应该是当前用户的id，在登录后的我的信息里面去取
          page: this.page
        }
        console.log('会员的互单内容')
        console.log(param)
        xianXianPeople(param).then(res => {
          this.XianPeopleInfo = res.data
        })
      },
      // 获取我的回单数量
      getXianMyHuiListFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:1,
          ed:1
        }
        xianxianMyHui(param).then(res=>{
          console.log('走这里-计算回单数目了吗')
          this.daiHunDanNum =Number(res.data.total);
        })
      },
      getStatusBarHeight() {
        uni.getSystemInfo({
            success: res => {
              console.log(res.statusBarHeight)
              this.systemBarHeight = res.statusBarHeight;
              console.log('是多少')
              console.log(this.systemBarHeight)
              const systemInfo = uni.getSystemInfoSync()
              if (systemInfo.osName === 'ios'){
                console.log('是苹果机')
              }
              if (systemInfo.osName === 'android'){
                console.log('是安卓机')
                this.systemBarHeight = res.statusBarHeight + 4;
              }
            }
          });
      },
      // 点击进入"我要互单"
      goHuDan() {
        uni.navigateTo({
          url: '/packageA/index/woYaoHuiDan'
        });
      },
      // 点击删除
      deleteBtn(item){
        this.selectXianYuInfo = item
        this.isShow2 = true
      },
      deletBtnSure(){
        console.log('选中的商品')
        console.log(this.selectXianYuInfo)
        let param = {
          openid:this.openid,
          id:this.selectXianYuInfo.id
        }
        xianXianDel(param).then(res=>{
          console.log('删除结果')
          console.log(res)
          if (res.error_code === 0) {
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
            this.showaddTan = this.isShow2 = false
            // 刷新列表
            this.page = 1
            this.myxianList = []
            this.getXianMyxianListFun()
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 点击编辑
      editBtn(item){
        this.isEdit = true
        this.selectXianYuInfo = item
        this.showaddTan = true
        this.addUpLoadpic = this.selectXianYuInfo.pic
        this.form = {
          title:this.selectXianYuInfo.title,
          kc:this.selectXianYuInfo.kc,
          pic:this.selectXianYuInfo.pic
        }
      },
      // 上传图片
      chooseImageBtn(){
        let that= this
        uni.chooseImage({
          count: 1,
          sizeType: "original",
          sourceType: ['album', 'camera'], //从相册选择
          success(res) {
            console.log('上传图片--咸鱼')
            console.log(res)
            uni.uploadFile({
              url: 'https://moshangweilai.herobing.com/other/xianpic', //上传接口地址
              name: 'pic', //后端接收的文件参数名
              filePath: res.tempFilePaths[0], //要上传的文件路径
              formData: {},
              header: {
                "Content-Type": "multipart/form-data"
              },
              success: (uploadFileRes) => {
                console.log('后端返回的图片')
                let res = JSON.parse(uploadFileRes.data)
                console.log(res);
                if (res.error_code === 0) {
                  let pic = res.data.pic
                  that.addUpLoadpic = pic
                }else {
                  uni.showToast({
                    icon: 'none',
                    title: res.msg
                  })
                }
              },
            })
          }
        })
      },
      // 点击隐藏弹窗
      hideTan(){
        this.showaddTan = this.isShow2 = false
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getXianMyxianListFun()
      },
      // 获取我的闲鱼列表
      getXianMyxianListFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:this.page
        }
        xianMyxianList(param).then(res=>{
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          let listRe = res.data.arrList
          if(listRe.length>0){
            that.myxianList = that.myxianList.concat(listRe);
          }
        })
      },
      // 点击"新增产品"出现新增弹窗
      showTanBtn(){
        // 判断是否有闲鱼信息
        if(this.list.length===0){
          uni.showToast({
            icon:'none',
            title:'请先填写闲鱼信息，方便伙伴找到你'
          })
          return
        }else{
          this.isEdit = false
          this.showaddTan = true
          this.selectXianYuInfo = {}
          this.addUpLoadpic = ''
          this.form = {
            pic:'',
            title:'',
            kc:''
          }
        }
      },
      // 点击"新增"确认按钮
      confirmBtn(){
        console.log('查看新增数据')
        console.log(this.form)
        console.log(this.addUpLoadpic)
        if(this.addUpLoadpic===''||this.form.title.trim()===''||this.form.kc.trim()===''){
          uni.showToast({
            icon:'none',
            title:'请将表单填写完整'
          })
        }else if(this.form.kc.trim()<=0){
			uni.showToast({
			  icon:'none',
			  title:'单数需大于0'
			})
		}else{
          console.log(this.isEdit)
          let param = {}
          if(this.isEdit){
            console.log('是编辑--要传id')
            param = {
              openid:this.openid,
              pic:this.addUpLoadpic,
              title:this.form.title,
              kc:this.form.kc,
              id:this.selectXianYuInfo.id
            }
            xianXianUpdatel(param).then(res=>{
              console.log('编辑结果')
              console.log(res)
              if (res.error_code === 0) {
                uni.showToast({
                  icon: 'success',
                  title: '编辑成功'
                })
                this.showaddTan = false
                // 刷新列表
                this.page = 1
                this.myxianList = []
                this.getXianMyxianListFun()
              } else {
                uni.showToast({
                  icon: 'none',
                  title: res.msg
                })
              }
            })
          }else{
            console.log('是新增--不需要传id')
            param = {
              openid:this.openid,
              pic:this.addUpLoadpic,
              title:this.form.title,
              kc:this.form.kc
            }
            xianXianAdd(param).then(res=>{
              console.log('新增结果')
              console.log(res)
              if (res.error_code === 0) {
                uni.showToast({
                  icon: 'success',
                  title: '添加成功'
                })
                this.showaddTan = false
                // 刷新列表
                this.page = 1
                this.myxianList = []
                this.getXianMyxianListFun()
              } else {
                uni.showToast({
                  icon: 'none',
                  title: res.msg
                })
              }
            })
          }
          console.log('表单数据')
          console.log(param)
          return
          
        }
      },
      // 改变状态
      changType(id){
        console.log('改变状态')
        console.log(id)
        let param={
          openid:this.openid,
          id:id
        }
        xianXianShow(param).then(res=>{
          if(res.error_code===0){
            this.page = 1
            this.myxianList = []
            this.getXianMyxianListFun()
          }
          
        })
      },
      fanuiBtn() {
        uni.navigateBack({
          delta: 1
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  page {
    padding: 0;
    margin: 0;
    background-color: rgba(238, 238, 238, 1);
  }

  .con {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .topWrap {
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(238, 238, 238, 1) 100%);
    color: rgba(16, 16, 16, 1);
    padding: 20rpx;
    box-sizing: border-box;

    .top {
      width: 100%;
      height: auto;

      .topz {
        width: 440rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 246, 228, 1);
        color: rgba(136, 136, 136, 1);
        font-size: 28rpx;
        padding: 0 34rpx;
        box-sizing: border-box;

        .topz_ipu {
          color: #F9BF41;
        }

        .topz_img {
          width: 48rpx;
          height: auto;
        }
      }

      .topy {
        width: 242rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255, 246, 228, 1);
        justify-content: center;

        .topyimg {
          width: 38rpx;
          height: auto;
        }

        .topy_t {
          color: rgba(249, 191, 65, 1);
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
    }

    .top2 {
      background-color: rgba(255, 255, 255, 1);
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      margin-top: 50rpx;
      padding: 30rpx 50rpx;
      box-sizing: border-box;

      .top2li {
        width: 190rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
        text-align: center;
        line-height: 90rpx;
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
        position: relative;

        .top2lic_te {
          position: absolute;
          width: 48rpx;
          height: 24rpx;
          border-radius: 100rpx;
          background-color: rgba(216, 30, 6, 1);
          text-align: center;
          line-height: 24rpx;
          top: 0;
          right: 0;
          color: rgba(255, 255, 255, 1);
          font-size: 24rpx;
        }
      }
    }

    .top3 {
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: auto;
      margin-top: 54rpx;
      margin-bottom: 42rpx;
      word-break: break-all;

      text {
        word-break: break-all;
      }

      .top3_t1 {
        color: #D81E06;
        font-weight: bold;
        margin-right: 15rpx;
        font-size: 24rpx;
      }

      .top3_t2 {
        font-size: 24rpx;
      }
    }
  }

  .guanc {
    width: 100%;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;

    .guancT {
      margin: 0 30rpx;
      color: rgba(0, 0, 0, 1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }

    .guancC {
      width: 100%;
      height: auto;

      .guancCli {
        width: 100%;
        height: auto;
        height: 80px;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }

      .guancCliz {
        width: 40%;

        .guancCliz_img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          margin-right: 20rpx;
        }

        .guancCliz_v1 {
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
        }

        .guancCliz_v2 {
          color: rgba(16, 16, 16, 1);
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }

    

  }
.guancCliz_y {
      width: 280rpx;
      justify-content: flex-end;
      margin-right: -40rpx;
      margin-top: 8rpx;
      // background: #f00;
      .guancCliz_y1 {
        width: 120rpx;
        height: 48rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 246, 228, 1) 100%);
        text-indent: 20rpx;
        color: rgba(249, 191, 65, 1);
        font-size: 28rpx;
        line-height: 48rpx;
        font-style: italic;
      }

      .guancCliz_y2 {
        width: 160rpx;
        height: 48rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
        font-size: 28rpx;
        line-height: 32rpx;
        position: relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0, 0, 0, 1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;

        text {
          color: rgba(216, 30, 6, 1);
          font-size: 48rpx;

        }
      }
    }
  input::placeholder {
    color: #F9BF41;
  }

  .shim {
    width: 100%;
    height: auto;
    justify-content: space-around;

    .shim1 {
      width: 212rpx;
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
          word-break: break-all;
         
    }
    .shim1.yanse1{
      background: linear-gradient(180deg, rgba(249,172,65,1) 0%,rgba(249,191,65,0) 100%);
      position: relative;
      margin-bottom: 10rpx;
      .ttt1{
        // box-shadow: 0px 1px 5px 0px rgba(16,16,16,0.35);
        font-weight: bold;
        color: rgba(255,246,228,1);
        font-size: 28rpx;
      }
      .ttt2{
        display: inline-block;
        min-width: 48rpx;
        height: 24rpx;
        border-radius: 100rpx;
        line-height: 24rpx;
        background-color: rgba(216,30,6,1);
        color: rgba(255,255,255,1);
        font-size: 24rpx;
        top:0;
        right: 0;
        position: absolute;
      }
    }
    .shim1.yanse2{
      background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(249,191,65,0) 100%);
      margin-bottom: 10rpx;
       overflow: hidden;
      .t1{
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
      }
      .t2{
        color: rgba(249,172,65,1);
        font-size: 34rpx;
        font-weight: bold;
        font-style: italic;
      }
    }
    .shim1.yanse3{
      background: linear-gradient(180deg, rgba(216,30,6,1) 0%,rgba(249,191,65,0) 100%);
      color: #fff;
      font-weight: bold;
    }
    .shim2_img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 100rpx;
    }
  }

  .shimb {
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 34rpx;

    text {
      margin-left: 16rpx;
    }
    .shimb111{
      line-height: 56rpx;
      color: rgba(16,16,16,1);
      font-size: 40rpx;
      font-weight: bold;
    }
    .shimb222{
      width: 160rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 100rpx;
      background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(249,191,65,0) 99%);
      text-align: center;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-top: 16rpx;
    }
  }
  .chunfe{
    min-width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 100rpx;
    background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 12px;
    text-align: left;
    font-style: italic;
    font-weight: bold;
    position: relative;
    margin: 0 18rpx;
    .chunfe_t1{
      position: absolute;
      left: -10rpx;
      top:0;
      width: 56rpx;
      height: 24rpx;
      border-radius: 100rpx;
      line-height: 24rpx;
      background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(249,191,65,1) 100%);
      color: #fff;
      font-weight: bold;
      font-size: 20rpx;
      text-align: center;
    }
    .chunfe_t2{
      display: block;
      width: 100%;
      text-align: center;
    }
  }
  .kianh {
    width: 100%;
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    .guancCliz_y {
      width: 400rpx;
      justify-content: flex-end;
      margin-right: -40rpx;

      // background: #f00;
      .guancCliz_y1 {
        width: 150rpx;
        height: 60rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(255, 246, 228, 1) 100%);
        text-indent: 20rpx;
        color: rgba(249, 191, 65, 1);
        font-size: 28rpx;
        line-height: 60rpx;
        font-style: italic;
      }

      .guancCliz_y2 {
        width: 210rpx;
        height: 60rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249, 191, 65, 1) 0%, rgba(255, 246, 228, 1) 100%);
        font-size: 28rpx;
        line-height: 43rpx;
        position: relative;
        z-index: 1;
        left: -50rpx;
        text-align: center;
        color: rgba(0, 0, 0, 1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;

        text {
          color: rgba(216, 30, 6, 1);
          font-size: 48rpx;

        }
      }
    }
  }

  .woLid {
    width: 100%;
    height: auto;
    margin-top: 40rpx;
    padding: 0 20rpx;
    box-sizing: border-box;

    .woLidT {
      width: 100%;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 10rpx;

      .woLidTz {
        color: rgba(0, 0, 0, 1);
        font-size: 36rpx;
      }

      .woLidTy {
        width: 212rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253, 230, 179, 1) 0%, rgba(255, 246, 246, 0) 100%);
        line-height: 90rpx;
        text-align: center;
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
      }
    }
  }

  .luit {
    width: 100%;
    height: auto;
    padding-bottom: 20rpx;

    .luitli {
      width: 100%;
      height: auto;
      padding: 30rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      margin-bottom: 20rpx;

      .luitliz {
        width: 200rpx;
        height: 200rpx;
        border-radius: 20rpx;
        
        flex-shrink: 0;
      }

      .luitliy {
        width: 440rpx;
        height: 180rpx;
        // background: #f00;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .luitliy_v1 {
          width: 100%;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
          line-height: 40rpx;
        }

        .luitliy_v2 {
          font-size: 28rpx;
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
        }
      }

      .luitliy_v3 {
        .luitliy_v3_y_img {
          width: 40rpx;
          height: auto;
          margin-left: 28rpx;
        }
      }

      .luitliy_v3xxx {
        margin-left: -30rpx;
      }
    }
  }
  .addTan{
    width: 80%;
    background: #fff;
    border-radius: 20rpx;
    height: 620rpx;
    position: fixed;
    top:50%;
    margin-top: -310rpx;
    left: 10%;
    z-index: 99;
    padding: 40rpx 50rpx;
    box-sizing: border-box;
    .addTanli{
      width: 100%;
      height: auto;
      margin-bottom: 20rpx;
      .addTanliz{
        font-size: 28rpx;
        margin-right: 20rpx;
      }
      .addTanliy{
        width: 100%;
        height: 120rpx;
        border-radius: 20rpx;
        text-align: center;
        justify-content: center;
        overflow: hidden;
        background-color: #fff6e4;
        margin-right: 11rpx;
        position: relative;
        overflow: hidden;
        margin-bottom: 11rpx;
        display: flex;
        align-items: center;
        .addTanliy_img{
          width: 210rpx;
          height: 160rpx;
        }
        .addTanliy_img2{
          width: 32rpx;
          height: 32rpx;
        }
        .addTanliy_text{
          color: #101010;
          font-size: 28rpx;
          margin-left: 10rpx;
        }
      }
      .addTanli_ipt{
        width: 100%;
        background-color: rgba(238,238,238,1);
        color: rgba(136,136,136,1);
        font-size: 14px;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 20rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
      }
    }
  }
  .hudanBtn{
        width: 100%;
        height: 80rpx;
        border-radius: 20rpx;
        background: linear-gradient(180deg, #f9bf41 0%, #fff6e4 100%);
        color: #101010;
        font-size: 28rpx;
        margin-top: 20rpx;
        text-align: center;
        line-height: 80rpx;
        margin-top: 50rpx;
  }
  .zhes_2 {
    width: 100%;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-bottom: 8rpx;
  
    .zhes_2li {
      color: rgba(0, 0, 0, 1);
      font-size: 28rpx;
      font-weight: bold;
  
      text {
        font-family: 'AvantGardeFont';
      }
    }
  }
  
  .zhes_3 {
    height: 32rpx;
    line-height: 32rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .zhes_4 {
    width: 100%;
    height: auto;
    border-radius: 20rpx;
    background-color: rgba(238, 238, 238, 1);
    padding: 20rpx 30rpx;
    color: rgba(249, 65, 65, 1);
    font-size: 24rpx;
    box-sizing: border-box;
    line-height: 40rpx;
    margin-bottom: 48rpx;
  }
  
  .zhes_5Wrap {
    width: 100%;
    font-size: 28rpx;
    text-align: center;
  
    .zhes_51 {
      width: 240rpx;
      background-color: rgba(238, 238, 238, 1);
      border-radius: 100rpx;
      height: 72rpx;
      line-height: 72rpx;
    }
  
    .zhes_52 {
      width: 240rpx;
      background-color: rgba(249, 191, 65, 1);
      border-radius: 100rpx;
      height: 72rpx;
      line-height: 72rpx;
    }
  }
  
  .tan {
    padding-bottom: 56rpx;
    margin-top: -55rpx;
    padding-bottom: 30rpx;
  }
  .shanuTitle{
    color: rgba(16,16,16,1);
    font-size: 32rpx;
    width: 100%;
    text-align: center;
    margin-bottom: 34rpx;
  }
</style>